<template>
	<navBar :info='info'></navBar>
	<view class="page">
		<view class="title">
			鼓机样式
			<image class="tip-icon" src="/static/image/faceConfig/bangzhu@2x.png"></image>
		</view>
		<view class="sec1">
			<image class="sec1-bg" src="/static/image/drumMachineConfig/bg.png"></image>
			<view class="sec1-content">
				<image class="info-logo" src="/static/image/drumMachineConfig/gu-icon.png"></image>
				
				<view class="btn-wrap">
					同时下拨开启鼓机
				</view>
			</view>
		</view>
		
		<view class="sec3">
			<view class="tab" :class="{active:item.value===tabKey}" v-for="item in tabs" :key="item.value" @click="handleTab(item.value)">{{item.label}}</view>
		</view>
		<view class="sec4">
			<view class="item">
				<image class="bg" src="/static/image/faceConfig/bass@2x.png"></image>
				<view class="box-text">
					<view class="item-text">
						基础琶音
					</view>
					<view class="item-info">
						<view class="item-sum">
							4/4
						</view>
						<view class="item-sums">
							90
						</view>
					</view>
				</view>
			</view>
			<view class="item">
				<image class="bg" src="/static/image/faceConfig/bass@2x.png"></image>
				<view class="box-text">
					<view class="item-text">
						基础琶音
					</view>
					<view class="item-info">
						<view class="item-sum">
							4/4
						</view>
						<view class="item-sums">
							90
						</view>
					</view>
				</view>
			</view>
			<view class="item">
				<image class="bg" src="/static/image/faceConfig/bass@2x.png"></image>
				<view class="box-text">
					<view class="item-text">
						基础琶音
					</view>
					<view class="item-info">
						<view class="item-sum">
							4/4
						</view>
						<view class="item-sums">
							90
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="sec5">
			<view class="title">
				自定义和弦伴奏
			</view>
			<view class="list">
				<view class="item" :class="item.label" v-for="item in lists" :key="item.label" @click="selTextF(item.label)">{{item.label}}</view>
			</view>
			<view class="sel-box" v-if="selTextArr.length">
				<view class="sel-label">
					已选择：
				</view>
				<view class="sel-value">
					{{selText}}
				</view>
			</view>
			<view class="btn-w">
				<picker @change="bindPickerChange" :value="arrIndex" :range="array">
					<view class="pai-box">{{array[arrIndex]}}<image class="smallarrow" src="/static/image/drumMachineConfig/smallarrow.png"></image></view>
				</picker>
				<text class="text">后</text>
				<button class="btn btn-start">开始播放</button>
				<button class="btn btn-play">循环播放</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,computed
	} from 'vue';
	import navBar from '@/components/nav-bar/index.vue';

	const info =  ref(
		{
			sum:65,
			bpm:'BPM',
			air:'#F',
			tune:'C1',
		}
	)
	const tabs = [
		{
			label:'基础',
			value:1
		},
		{
			label:'分解',
			value:2
		},
		{
			label:'扫弦',
			value:3
		},
		{
			label:'技巧',
			value:4
		},
	]
	const tabKey = ref(1)
	const handleTab = (val)=>{
		tabKey.value = val
	}
	
	// 
	const lists = [
		{
			label:'C',
		},
		{
			label:'Dm',
		},
		{
			label:'Em',
		},
		{
			label:'F',
		},
		{
			label:'G',
		},
		{
			label:'Am',
		},
		{
			label:'Bm',
		},
	]
	const selTextArr = ref([])
	const selTextF = (val)=>{
		selTextArr.value.push(val)
	}
	const selText = computed(()=>{
		return selTextArr.value.length?selTextArr.value.join('-'):''
	})
	// /
	const array = ['中国', '美国', '巴西', '日本']
	const arrIndex = ref(0)
	const bindPickerChange = (e)=>{
		arrIndex.value = e.detail.value
	}
	
</script>


<style lang="scss" scoped>
@import './index.scss';
</style>